<template>
  <div>
    <line-chart :chart-data="chartData" />
  </div>
</template>

<script>
import { Line } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';

ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement);

export default {
  props: {
    chartData: {
      type: Array,
      required: true
    }
  },
  components: {
    LineChart: {
      extends: Line,
      props: ['chartData'],
      data() {
        return {
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        };
      },
      mounted() {
        this.renderChart({
          labels: this.chartData.map(item => item.x),
          datasets: [
            {
              label: '预测和',
              data: this.chartData.map(item => item.y),
              borderColor: 'rgba(75, 192, 192, 1)',
              borderWidth: 1,
              fill: false
            }
          ]
        }, this.options);
      }
    }
  }
};
</script>
